<template>
  <div class="storeManagementList_module">
    <el-card>
      <el-form :inline="true" ref="storeManagementListRef" :model="formData">
        <!-- 客户名称 -->
        <el-form-item
          :label="$t('customerInfoMation_customerName')"
          prop="customerName"
        >
          <el-input
            v-trim
            :placeholder="$t('storeManagement_customerNameSelect_placeholder')"
            v-model="formData.customerName"
          ></el-input>
        </el-form-item>

        <!-- 店铺名称 -->
        <el-form-item :label="$t('storeManagement_storeName')" prop="shopName">
          <el-input
            v-trim
            :placeholder="$t('storeManagement_storeName_placeholder')"
            v-model="formData.shopName"
          ></el-input>
        </el-form-item>

        <!-- 店铺联系方式 -->
        <el-form-item
          :label="$t('customerInfoMation_storeContactInformation')"
          prop="contactPhone"
        >
          <el-input
            v-trim
            :placeholder="
              $t('customerInfoMation_storeContactInformation_placeholder')
            "
            v-model="formData.contactPhone"
          ></el-input>
        </el-form-item>

        <!-- 搜索 -->
        <el-form-item>
          <el-button type="primary" @click="handleSearch">{{
            $t("search")
          }}</el-button>
          <el-button
            type="primary"
            @click="handleReset(storeManagementListRef)"
            >{{ $t("reset") }}</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <TableComponent
      :requestFn="requestFn"
      :columns="columns"
      class="mt15"
      align="center"
      :initParams="formData"
    >
      <template #handleOpt>
        <div class="mb15 wfull flex justify_end">
          <!-- 新增 -->
          <el-button type="primary" @click="handleAdd">{{
            $t("new_add")
          }}</el-button>
        </div>
      </template>
      <template #operate="scope">
        <div>
          <!-- 详情、编辑 -->
          <span
            @click="handleDetail(scope.row)"
            class="color_primary pointer"
            >{{ $t("detail") }}</span
          >
          <span
            @click="handleEdit(scope.row)"
            class="color_primary ml10 pointer"
            >{{ $t("edit") }}</span
          >
        </div>
      </template>
    </TableComponent>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { StoreManageListFormDataType } from "@/viewModel/storeManagement/storeManagement";
import { FormInstance } from "element-plus";
import { getShopQuery } from "../../service/storeManagement/storeManagement"
const { t } = useI18n();
const router = useRouter();

// 表单的数据
const formData = ref<StoreManageListFormDataType>(
  new StoreManageListFormDataType()
);
const storeManagementListRef = ref<FormInstance>();
const requestFn = async (payload:any) => {
  let res = await getShopQuery(payload);
  return {
    code: 200,
    data: (res && res.data && res.data.data) || [],
    total: res.data.total
  };
};

// 查询
const handleSearch = () => {
  formData.value = { ...formData.value };
};
// 重置
const handleReset = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  console.log("formData =>", formData.value);

  handleSearch();
};
const handleDetail = (payload: any) => {
  router.push({
    name: "storeDetail",
    params: {
      shopId: payload.shopId
    }
  });
};
const handleEdit = (payload: any) => {
  router.push({
    name: "storeEdit",
    params: {
      shopId: payload.shopId
    }
  });
};
const handleAdd = () => {
  router.push("/baseLayout/storeAdd");
};
const columns = [
  {
    label: t("customerInfoMation_customerName"), // 客户名称
    prop: "customerName",
  },
  {
    label: t("storeManagement_storeName"), // 店铺名称
    prop: "shopName",
  },
  {
    label: t("customerInfoMation_shopType"), // 店铺类型
    prop: "shopType",
  },
  {
    label: t("storeManagement_companyName"), // 公司名称
    prop: "companyName",
    overflowToolTip: true,
  },
  {
    label: t("customerInfoMation_storeContactPerson"), // 店铺联系人
    prop: "contactName",
  },
  {
    label: t("customerInfoMation_storeContactInformation"), // 店铺联系方式
    prop: "contactPhone",
  },
  {
    label: t("customerInfoMation_metaService"), // 元服务
    prop: "yuanfuwu",
  },
  {
    label: t("customerInfoMation_address"), // 地址
    prop: "contactAddress",
    overflowToolTip: true,
  },
  {
    label: t("operate"), // 操作
    prop: "operate",
    useSlot: true,
  },
];
</script>
<style scoped>
.storeManagementList_module {
  overflow-y: auto;
  height: 100%;
}
</style>